<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航空订票系统 - 首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
        .hero-section {
            background: linear-gradient(135deg, #1a237e, #3949ab);
            color: white;
            position: relative;
            overflow: hidden;
            padding: 6rem 0;
            margin-top: -1rem;
            margin-bottom: 3rem;
            border-radius: 0 0 50% 50% / 20%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        .hero-section::after {
            content: '';
            position: absolute;
            bottom: -100px;
            left: -100px;
            width: 400px;
            height: 400px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }
        
        .hero-title {
            font-weight: 700;
            font-size: 3rem;
            margin-bottom: 1.5rem;
            position: relative;
        }
        
        .hero-subtitle {
            font-weight: 300;
            font-size: 1.5rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }
        
        .search-card {
            transform: translateY(-70px);
            margin-bottom: -40px;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }
        
        .search-card .card-header {
            border-top-left-radius: 20px !important;
            border-top-right-radius: 20px !important;
        }
        
        .animated-plane {
            animation: fly 6s infinite ease-in-out;
            position: absolute;
            top: 40%;
            right: 5%;
            font-size: 4rem;
            opacity: 0.2;
            transform: rotate(25deg);
        }

        @keyframes fly {
            0% {
                transform: translateY(0) rotate(25deg);
            }
            50% {
                transform: translateY(-30px) rotate(25deg);
            }
            100% {
                transform: translateY(0) rotate(25deg);
            }
        }
        
        .flight-card {
            transition: all 0.3s ease;
            border-radius: 15px;
            overflow: hidden;
        }
        
        .flight-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .flight-card .card-body {
            padding: 1.5rem;
        }
        
        .flight-card .flight-route {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 1.5rem 0;
        }
        
        .flight-route::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 15%;
            right: 15%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #3949ab, transparent);
            z-index: 0;
        }
        
        .flight-route .city {
            position: relative;
            z-index: 1;
            background-color: white;
            padding: 0.5rem;
        }
        
        .flight-route .plane-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.5rem;
            color: #3949ab;
            background-color: white;
            padding: 0.5rem;
            border-radius: 50%;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.1);
                opacity: 0.8;
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
        }
        
        .feature-box {
            text-align: center;
            padding: 2rem;
            border-radius: 15px;
            transition: all 0.3s ease;
            background-color: white;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 2rem;
        }
        
        .feature-box:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }
        
        .feature-box .feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #e3f2fd, #bbdefb);
            border-radius: 50%;
            font-size: 2rem;
            color: #1a237e;
        }
        
        .feature-title {
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 1rem;
            color: #1a237e;
        }
        
        .ripple-effect {
            position: absolute;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.3);
            width: 100px;
            height: 100px;
            margin-top: -50px;
            margin-left: -50px;
            animation: ripple 0.6s linear;
            pointer-events: none;
        }
        
        @keyframes ripple {
            0% {
                transform: scale(0);
                opacity: 0.5;
            }
            100% {
                transform: scale(4);
                opacity: 0;
            }
        }
        
        .btn {
            position: relative;
            overflow: hidden;
        }
        
        @media (max-width: 767.98px) {
            .hero-title {
                font-size: 2.2rem;
            }
            
            .hero-subtitle {
                font-size: 1.2rem;
            }
            
            .search-card {
                transform: translateY(-40px);
                margin-bottom: -20px;
            }
            
            .animated-plane {
                font-size: 3rem;
                top: 50%;
                right: 10%;
            }
            
            .table-responsive table td[data-label]:before {
                content: attr(data-label);
                display: block;
                font-weight: bold;
                margin-bottom: 0.5rem;
                color: #3949ab;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/flightbooking/"><i class="fas fa-plane mr-2"></i>航空订票系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="/flightbooking/"><i class="fas fa-home mr-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/flights"><i class="fas fa-plane-departure mr-1"></i> 航班管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/passengers"><i class="fas fa-users mr-1"></i> 旅客管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/tickets"><i class="fas fa-ticket-alt mr-1"></i> 票务管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/dashboard"><i class="fas fa-chart-line mr-1"></i> 统计面板</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0 d-none d-lg-flex">
                    <div class="input-group">
                        <input class="form-control" type="search" placeholder="快速搜索航班" aria-label="Search">
                        <div class="input-group-append">
                            <button class="btn btn-light" type="submit"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </nav>

    <div class="hero-section">
        <div class="container position-relative">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <h1 class="hero-title animate__animated animate__fadeInUp">开启您的航空之旅</h1>
                    <p class="hero-subtitle animate__animated animate__fadeInUp animate__delay-1s">专业的航班预订和管理系统，为您提供便捷的旅行体验</p>
                    <div class="mt-4 animate__animated animate__fadeInUp animate__delay-2s">
                        <a href="/flightbooking/flights" class="btn btn-light btn-lg mr-3 shadow"><i class="fas fa-search mr-1"></i> 浏览航班</a>
                        <a href="/flightbooking/tickets" class="btn btn-outline-light btn-lg"><i class="fas fa-ticket-alt mr-1"></i> 票务管理</a>
                    </div>
                </div>
            </div>
            <i class="fas fa-plane animated-plane"></i>
        </div>
    </div>

    <div class="container">
        <div class="card search-card animate__animated animate__fadeInUp">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-search mr-2"></i>航班搜索</h5>
            </div>
            <div class="card-body">
                <form action="/flightbooking/flights/search" method="get">
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="departureCity"><i class="fas fa-plane-departure mr-1"></i>出发城市</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
                                </div>
                                <input type="text" class="form-control" id="departureCity" name="departureCity" placeholder="例如：北京" required data-toggle="tooltip" title="请输入出发城市">
                            </div>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="arrivalCity"><i class="fas fa-plane-arrival mr-1"></i>到达城市</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
                                </div>
                                <input type="text" class="form-control" id="arrivalCity" name="arrivalCity" placeholder="例如：上海" required data-toggle="tooltip" title="请输入到达城市">
                            </div>
                        </div>
                        <div class="form-group col-md-2">
                            <label for="departureDate"><i class="far fa-calendar-alt mr-1"></i>出发日期</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="far fa-calendar"></i></span>
                                </div>
                                <input type="date" class="form-control" id="departureDate" name="departureDate" data-toggle="tooltip" title="请选择出发日期">
                            </div>
                        </div>
                        <div class="form-group col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary btn-block shadow-sm"><i class="fas fa-search mr-1"></i> 搜索</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <h2 class="text-center mt-5 mb-4 text-primary">我们的特色服务</h2>
        <div class="row">
            <div class="col-md-4">
                <div class="feature-box slide-up-element">
                    <div class="feature-icon">
                        <i class="fas fa-search"></i>
                    </div>
                    <h3 class="feature-title">便捷查询</h3>
                    <p>智能搜索引擎，快速找到最佳航班，精准筛选您所需的航线和时间信息。</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-box slide-up-element">
                    <div class="feature-icon">
                        <i class="fas fa-ticket-alt"></i>
                    </div>
                    <h3 class="feature-title">快速预订</h3>
                    <p>简化的预订流程，几分钟内即可完成选座和付款，高效便捷的出票服务。</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-box slide-up-element">
                    <div class="feature-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h3 class="feature-title">贴心服务</h3>
                    <p>全方位的航班状态跟踪，行程变更提醒，为您的旅行保驾护航。</p>
                </div>
            </div>
        </div>

        <h2 class="text-center mt-5 mb-4 text-primary">热门航线推荐</h2>
        <div class="row">
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card flight-card zoom-in-element">
                    <div class="card-body">
                        <h5 class="card-title text-primary"><i class="fas fa-star mr-1"></i>北京 - 上海</h5>
                        <div class="flight-route">
                            <div class="city">
                                <div class="h5 mb-0">北京</div>
                                <small class="text-muted">PEK</small>
                            </div>
                            <i class="fas fa-plane plane-icon"></i>
                            <div class="city text-right">
                                <div class="h5 mb-0">上海</div>
                                <small class="text-muted">SHA</small>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="badge badge-success">每日多班</span>
                                <span class="text-muted ml-2">2小时</span>
                            </div>
                            <div class="h5 mb-0 text-primary">¥1200起</div>
                        </div>
                        <div class="mt-3">
                            <a href="/flightbooking/flights/search?departureCity=北京&arrivalCity=上海" class="btn btn-outline-primary btn-block">查看航班</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card flight-card zoom-in-element">
                    <div class="card-body">
                        <h5 class="card-title text-primary"><i class="fas fa-star mr-1"></i>广州 - 深圳</h5>
                        <div class="flight-route">
                            <div class="city">
                                <div class="h5 mb-0">广州</div>
                                <small class="text-muted">CAN</small>
                            </div>
                            <i class="fas fa-plane plane-icon"></i>
                            <div class="city text-right">
                                <div class="h5 mb-0">深圳</div>
                                <small class="text-muted">SZX</small>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="badge badge-success">每日多班</span>
                                <span class="text-muted ml-2">1小时</span>
                            </div>
                            <div class="h5 mb-0 text-primary">¥800起</div>
                        </div>
                        <div class="mt-3">
                            <a href="/flightbooking/flights/search?departureCity=广州&arrivalCity=深圳" class="btn btn-outline-primary btn-block">查看航班</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card flight-card zoom-in-element">
                    <div class="card-body">
                        <h5 class="card-title text-primary"><i class="fas fa-star mr-1"></i>成都 - 重庆</h5>
                        <div class="flight-route">
                            <div class="city">
                                <div class="h5 mb-0">成都</div>
                                <small class="text-muted">CTU</small>
                            </div>
                            <i class="fas fa-plane plane-icon"></i>
                            <div class="city text-right">
                                <div class="h5 mb-0">重庆</div>
                                <small class="text-muted">CKG</small>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="badge badge-success">每日多班</span>
                                <span class="text-muted ml-2">1小时</span>
                            </div>
                            <div class="h5 mb-0 text-primary">¥700起</div>
                        </div>
                        <div class="mt-3">
                            <a href="/flightbooking/flights/search?departureCity=成都&arrivalCity=重庆" class="btn btn-outline-primary btn-block">查看航班</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card animate__animated animate__fadeInUp animate__delay-2s mt-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-list-alt mr-2"></i>最新航班信息</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>航班号</th>
                                <th>航空公司</th>
                                <th>出发城市</th>
                                <th>到达城市</th>
                                <th>出发时间</th>
                                <th>到达时间</th>
                                <th>基本票价</th>
                                <th>剩余座位</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="flight : ${flights}" class="fade-in-element">
                                <td th:text="${flight.flightId}">CA1234</td>
                                <td th:text="${flight.airlineCompany}">中国国际航空</td>
                                <td th:text="${flight.departureCity}">北京</td>
                                <td th:text="${flight.arrivalCity}">上海</td>
                                <td th:text="${#dates.format(flight.departureTime, 'yyyy-MM-dd HH:mm')}">2023-07-01 08:00</td>
                                <td th:text="${#dates.format(flight.arrivalTime, 'yyyy-MM-dd HH:mm')}">2023-07-01 10:30</td>
                                <td>¥<span th:text="${flight.basePrice}">1200.00</span></td>
                                <td>
                                    <span th:if="${flight.remainingSeats > 20}" class="badge badge-success" th:text="${flight.remainingSeats}">150</span>
                                    <span th:if="${flight.remainingSeats <= 20 && flight.remainingSeats > 0}" class="badge badge-warning" th:text="${flight.remainingSeats}">15</span>
                                    <span th:if="${flight.remainingSeats <= 0}" class="badge badge-danger">已满</span>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a th:href="@{/flights/{id}(id=${flight.flightId})}" class="btn btn-info"><i class="fas fa-info-circle"></i></a>
                                        <a th:if="${flight.remainingSeats > 0}" th:href="@{/tickets/book/{id}(id=${flight.flightId})}" class="btn btn-success"><i class="fas fa-ticket-alt"></i></a>
                                    </div>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(flights)}">
                                <td colspan="9" class="text-center py-5">
                                    <i class="fas fa-plane-slash fa-3x text-muted mb-3 d-block"></i>
                                    <p class="text-muted">暂无航班信息</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="mt-3 text-right">
                    <a href="/flightbooking/flights" class="btn btn-outline-primary">查看所有航班 <i class="fas fa-arrow-right ml-1"></i></a>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-4 text-center text-md-left mb-3 mb-md-0">
                    <h5><i class="fas fa-plane mr-2"></i>航空订票系统</h5>
                    <p class="mb-0">提供便捷、高效的航班预订服务</p>
                </div>
                <div class="col-md-4 text-center mb-3 mb-md-0">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/flightbooking/flights" class="text-light"><i class="fas fa-angle-right mr-2"></i>航班查询</a></li>
                        <li><a href="/flightbooking/passengers" class="text-light"><i class="fas fa-angle-right mr-2"></i>旅客管理</a></li>
                        <li><a href="/flightbooking/tickets" class="text-light"><i class="fas fa-angle-right mr-2"></i>机票预订</a></li>
                    </ul>
                </div>
                <div class="col-md-4 text-center text-md-right">
                    <h5>联系我们</h5>
                    <p class="mb-0">客服热线: 400-123-4567</p>
                    <div class="mt-3">
                        <a href="#" class="text-light mr-3"><i class="fab fa-weixin fa-lg"></i></a>
                        <a href="#" class="text-light mr-3"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-light"><i class="fas fa-envelope fa-lg"></i></a>
                    </div>
                    <p class="mt-3 mb-0">© 2023 航空订票系统 - JZA04</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/main.js"></script>
</body>
</html>